<Hds::AppFrame @hasSidebar={{@showSidebar}} @hasHeader={{false}} @hasFooter={{false}} as |Frame|>
  <Frame.Sidebar data-test-sidebar-nav>
    <Hds::SideNav @isResponsive={{true}} @hasA11yRefocus={{true}} @a11yRefocusSkipTo="app-main-content">
      <:header>
        <Hds::SideNav::Header>
          <:logo>
            <Sidebar::Header::HomeLink
              @icon="openbao"
              @route="vault.cluster"
              @model={{this.currentCluster.cluster.name}}
              @ariaLabel="home link"
              data-test-sidebar-logo
            />
          </:logo>
          <:actions>
            <Hds::SideNav::Header::IconButton
              class="sidebar-button"
              @icon="terminal-screen"
              @ariaLabel="Console toggle"
              data-test-console-toggle
              {{on "click" (fn (mut this.console.isOpen) (not this.console.isOpen))}}
            />
            <Sidebar::UserMenu />
          </:actions>
        </Hds::SideNav::Header>
      </:header>

      {{! this block is where the Hds::SideNav::Portal components render into }}
      <:body>
        <Hds::SideNav::Portal::Target aria-label="sidebar navigation links" />
      </:body>
    </Hds::SideNav>
  </Frame.Sidebar>
  <Frame.Main id="app-main-content" class={{if this.console.isOpen "main--console-open"}}>
    {{! outlet for app content }}
    <div id="modal-wormhole"></div>
    {{yield}}
    <div data-test-console-panel class={{if this.console.isOpen "panel-open"}}>
      <Console::UiPanel @isFullscreen={{this.consoleFullscreen}} />
    </div>
  </Frame.Main>
</Hds::AppFrame>